import { Tooltip } from 'antd';
import React, { FC, ReactElement, useCallback, useEffect, useRef, useState } from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
export interface IProps {
    text: string;
    children: ReactElement;
    delay: number;
}
export default ({ text, children, delay }: IProps) => {
    const [visible, setVisible] = useState(false)
    const copy = useCallback(() => {
        setVisible(true)
    }, [])

    const delayRef = useRef(delay)
    useEffect(() => {
        if (visible) {
            const timer = setTimeout(() => {
                setVisible(false)
            }, delayRef.current);
            return () => {
                clearTimeout(timer)
            }
        }
    }, [visible])
    return (
        <Tooltip visible={visible} title="已复制至剪切板">
            <CopyToClipboard text={text} onCopy={copy}>
                {children}
            </CopyToClipboard>
        </Tooltip>
    )
}